<template>
  <section class="staff-select">
    <el-select v-model="content" placeholder="请选择负责人" @change="onChange" filterable :style="style" multiple>
      <el-option v-for="dict in staffInfoList" :key="dict.staffId" :label="dict.realName+' （'+dict.postNames+'）'" :value="dict.staffId">
        {{ dict.realName+' （'+dict.postNames+'）- '+dict.deptName }}
      </el-option>
    </el-select>
    <!-- <el-input class="staff-input" v-model="postName" placeholder="请输入负责人" disabled /> -->
  </section>
</template>

<script setup lang="ts">
import { propTypes } from '@/utils/propTypes';
import { listWithPostAndDept } from '@/api/office/staff';
import { StaffVO, StaffQuery, StaffForm } from '@/api/office/staff/types';

const props = defineProps({
  modelValue: propTypes.array || propTypes.string || propTypes.number || undefined,
  multiple: propTypes.bool.def(false),
  style: {
    type: Object,
    default: () => {
      return { width: '240px' };
    }
  }
  // width: propTypes.string.def("240") || propTypes.number.def(240)
});

const staffInfoList = ref<StaffVO[]>([]);
const queryParams = reactive<StaffQuery>({
  pageNum: 1,
  pageSize: 10000,
  deptId: undefined,
  realName: undefined,
  phone: undefined,
  birthday: undefined,
  eCardNo: undefined,
  idCardNo: undefined,
  censusRegister: undefined,
  address: undefined,
  facePicStatus: undefined
});

// 负责人
const postName = ref('');
const initPostName = (val: any) => {
  for (let staff of staffInfoList.value) {
    if (staff.staffId == val) {
      postName.value = staff.postNames;
      break;
    }
  }
};

const content = ref('');
watch(
  () => props.modelValue,
  (v) => {
    if (v != content.value) {
      content.value = v;
      initPostName(v);
    }
  },
  { immediate: true }
);

const emit = defineEmits(['change', 'update:modelValue']);

const onChange = (data: any) => {
  console.log('data', data);
  emit('change', data);
  emit('update:modelValue', data);
  initPostName(data);
};

/** 查询列表 */
const getList = async () => {
  const res = await listWithPostAndDept(queryParams.value);
  staffInfoList.value = res;
  initPostName(content.value);
};

const clear = () => {
  content.value = undefined;
  emit('update:modelValue', content.value);
};

onMounted(() => {
  getList();
});
</script>

<style scoped>
.staff-select {
  width: 100%;
  display: flex;
  .staff-input {
    width: 300px;
    margin-left: 20px;
  }
}
</style>
